<template>
  <div class="districtManage">
    <!-- 列表 -->
    <div class="list-container" v-if="operateType == 0">
      <div class="add-button" @click="handelOperate(1)">+ 新增片区</div>
      <div class="body">
        <a-spin :spinning="spinning"></a-spin>
        <a-empty description="暂无数据" v-if="listSource.length == 0" />
        <div class="list-item" v-for="(item, index) in listSource" :key="index">
          <div class="header">{{ item.name }}</div>
          <div class="content">
            <div class="viewport">
              <img :src="item.viewPortImage" alt="" />
            </div>
            <div class="operate">
              <!-- 编辑 -->
              <a-tooltip placement="top">
                <template slot="title">编辑</template>
                <icon-font
                  type="icon-a-bianji1"
                  @click="handelOperate(2, item)"
                />
              </a-tooltip>
              <!-- 定位 -->
              <a-tooltip placement="top">
                <template slot="title">定位</template>
                <icon-font
                  type="icon-dingwei"
                  @click="handleLocationViewport(item)"
                />
              </a-tooltip>
              <!-- 删除 -->
              <a-tooltip placement="top">
                <template slot="title">删除</template>
                <icon-font type="icon-a-shanchu1" @click="handelDelete(item)" />
              </a-tooltip>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 新增/编辑区域 -->
    <div class="operate-container" v-else>
      <div class="header">新增片区</div>
      <div class="body">
        <!--  -->
        <div class="form-container">
          <a-form-model ref="ruleForm" :model="form" :rules="rules">
            <!-- 所属模块 -->
            <a-form-model-item label="所属模块" prop="module">
              <a-select v-model="form.module" placeholder="请选择所属模块">
                <a-select-option :value="0">
                  全部
                </a-select-option>
                <a-select-option :value="1">
                  港区实景
                </a-select-option>
                <a-select-option :value="2">
                  规划管理
                </a-select-option>
                <a-select-option :value="3">
                  项目千里眼
                </a-select-option>
              </a-select>
            </a-form-model-item>

            <!-- 所属区域 -->
            <a-form-model-item label="所属区域" prop="superior">
              <a-tree-select
                allowClear
                :tree-data="form.superiorData"
                v-model="form.superior"
                tree-default-expand-all
                :replaceFields="{
                  children: 'childs',
                  title: 'name',
                  key: 'uuid',
                  value: 'uuid',
                }"
                placeholder="请选择所属区域"
              >
              </a-tree-select>
            </a-form-model-item>

            <!-- 类型 -->
            <a-form-model-item label="类型" prop="type">
              <a-select v-model="form.type" placeholder="请选择类型">
                <a-select-option
                  :value="item.dicItemCode"
                  v-for="(item, index) in form.typeData"
                  :key="index"
                >
                  {{ item.dicItemName }}
                </a-select-option>
              </a-select>
            </a-form-model-item>

            <!-- 名称 -->
            <a-form-model-item ref="name" label="名称" prop="name">
              <a-input
                allowClear
                v-model.trim="form.name"
                placeholder="请输入名称"
                @change="handleNameChange($event)"
              />
            </a-form-model-item>

            <!-- 片区样式 -->
            <a-form-model-item
              ref="cardStyle"
              label="片区样式"
              prop="cardStyle"
            >
              <div class="icon-form-item">
                <div class="button" @click="openCardStyleModal()">
                  点击设置
                </div>
              </div>
            </a-form-model-item>

            <!-- 位置 -->
            <a-form-model-item
              ref="pathList"
              label="位置（点击模型自动获取）"
              prop="pathList"
            >
              <div class="position-form-item">
                <div class="button" v-if="!drawerFlag" @click="startDrawer()">
                  点击开始
                </div>
                <div class="button" v-if="drawerFlag" @click="completeDrawer()">
                  完成绘制
                </div>
                <div class="point-list">
                  <div
                    class="point-item"
                    v-for="(item, index) in form.pathList"
                    :key="index"
                  >
                    顶点{{ index + 1 }}
                    <div class="del-btn">
                      <a-icon type="close-circle" @click="deletePoint(index)" />
                    </div>
                  </div>
                </div>
              </div>
            </a-form-model-item>

            <!-- 视角 -->
            <a-form-model-item
              ref="angle"
              label="视角（默认当前视角）"
              prop="angle"
            >
              <div class="angle-form-item">
                <div class="button" @click="getCamLocate()">点击获取</div>
                <!-- <div class="angle-img"></div> -->
              </div>
            </a-form-model-item>
          </a-form-model>
        </div>
        <!--  -->
        <div class="button-container">
          <a-button class="cancel" :disabled="submitLoading" @click="onCancel()"
            >取消</a-button
          >
          <a-button type="primary" :loading="submitLoading" @click="onSubmit()"
            >保存</a-button
          >
        </div>
      </div>
    </div>

    <!-- 卡片样式弹窗 -->
    <cardStyleModal
      :visible.sync="cardStyleModalVisible"
      :borderColor.sync="form.borderColor"
      :fillColor.sync="form.fillColor"
      :textColor.sync="form.textColor"
      :textBorderColor.sync="form.textBorderColor"
      :opacity.sync="form.opacity"
      :borderWidth.sync="form.borderWidth"
      @change="cardStyleChange($event)"
    ></cardStyleModal>
  </div>
</template>
<script>
// 片区管理
import { axios } from "@/utils/request";
import html2canvas from "html2canvas";
import { Icon } from "ant-design-vue";
import iconfrontjs from "@/assets/IconFont/iconfont.js";
const iconFrontUrl = iconfrontjs;
const IconFont = Icon.createFromIconfontCN({
  scriptUrl: iconFrontUrl,
});
import textStyleModal from "./textStyleModal";
import cardStyleModal from "./cardStyleModal";
import { addAttributeByKey, randomUUID } from "@/utils/util.js";
import cloneDeep from "lodash.clonedeep";
import { EventBus } from "@/utils/eventBus";
export default {
  name: "districtManage",
  inject: ["digitalKey"],
  props: {
    ProbeRet: {
      type: Object,
      default: () => {},
    },
  },
  components: {
    IconFont,
    cardStyleModal,
    textStyleModal,
  },
  computed: {
    digitalKeyVal() {
      return this.digitalKey();
    },
  },
  watch: {
    //
    ProbeRet: {
      handler(val) {
        let { drawerFlag } = this;
        if (drawerFlag) {
          let { elemPos } = val;
          this.form.pathList.push(elemPos);
          this.drawerLine();
        }
      },
    },

    //模块切换
    digitalKeyVal: {
      handler(val) {
        this.resetForm();
        this.getListData();
      },
    },
  },
  data() {
    return {
      spinning: false,
      //0 列表  1新增  2编辑
      operateType: 0,
      listSource: [],
      cardStyleModalVisible: false,
      bimGraphId: "",
      drawerFlag: false,
      submitLoading: false,
      submitSuccess: false,
      getCamLocateFlag: false,
      form: {
        //所属模块
        module: 0,
        //所属区域
        superior: undefined,
        superiorData: [],
        //名称
        name: "",
        //类型
        type: undefined,
        typeData: [],
        //图标
        icon: "",
        //路径
        pathList: [],
        //区域边框颜色
        borderColor: "#7FEA9B",
        //区域填充颜色
        fillColor: "#7FEA9B",
        //名称字体颜色
        textColor: "#50DD7E",
        //名称边框颜色
        textBorderColor: "#012D0F",
        //背景透明度
        opacity: 0.5,
        //边框宽度
        borderWidth: 2,
        //视角
        angle: "",
      },
      formCopy: {},
      rules: {
        name: [
          {
            required: true,
            message: "请输入片区名称",
          },
        ],
        position: [
          {
            required: true,
            message: "请选择位置",
          },
        ],
        // superior: [
        //   {
        //     required: true,
        //     message: "请选择所属区域",
        //     trigger: ["change"],
        //   },
        // ],
        type: [
          {
            required: true,
            message: "请选择所属港区",
            trigger: ["change"],
          },
        ],
      },
    };
  },

  mounted() {
    this.getListData();
  },
  methods: {
    //查询列表数据
    getListData() {
      return new Promise((resolve, reject) => {
        this.spinning = true;
        axios
          .post(
            `/probusiness/lygPortAreaRegionMarking/queryList`,
            {
              moduleType: Number(this.getModuleTypeCode()),
              type: 2,
            },
            {
              headers: {
                "Content-Type": "application/json",
              },
            }
          )
          .then((res) => {
            let { statusCode, data } = res;
            if (statusCode == 200) {
              this.listSource = data ?? [];
              resolve();
            } else {
              this.listSource = [];
              reject();
            }
          })
          .catch((_) => {
            this.listSource = [];
            reject();
          })
          .finally((_) => {
            this.spinning = false;
          });
      });
    },

    //获取模块对应code
    getModuleTypeCode() {
      switch (this.digitalKey()) {
        //港区实景
        case "LiveAction":
          return "1";

        //规划管理
        case "PlanningManage":
          return "2";

        //项目千里眼
        case "DynamicMonitor":
          return "3";

        default:
          break;
      }
    },

    //定位视口
    handleLocationViewport(item = {}, index = 0) {
      let { camDir, camPos, camRotate } = item;
      this.activeIndex = index;
      try {
        var camLoc = new BlackHole3D.RECamLoc();
        camLoc.camPos = JSON.parse(camPos);
        camLoc.camRotate = JSON.parse(camRotate);
        camLoc.camDir = JSON.parse(camDir);
        var locDelay = 0;
        var locTime = 0.5;
        BlackHole3D.Camera.setCamLocateTo(camLoc, locDelay, locTime);
      } catch (error) {}
    },

    //监听名称输入
    handleNameChange() {
      let { drawerFlag } = this;
      if (!drawerFlag && this.form.pathList.length > 2) {
        this.drawerLine(1);
      }
    },

    //开始绘制
    startDrawer() {
      let { type, name } = this.form;
      if (!type) {
        this.$message.warning("请选择类型！");
        return;
      } else if (!name) {
        this.$message.warning("请输入片区名称！");
        return;
      }
      this.drawerFlag = true;
      if (this.form.pathList.length > 0) {
        this.drawerLine(2);
      } else {
        this.bimGraphId = randomUUID();
      }
      this.$message.success("点击模型开始绘制！");
    },

    //完成绘制
    completeDrawer() {
      if (this.form.pathList.length < 3) {
        this.$message.error("至少选取三个点！");
        return;
      }
      this.drawerFlag = false;
      this.drawerLine(1);
    },

    //绘制片区
    drawerLine(type = 0, data) {
      let { bimGraphId } = this;
      let {
        borderColor,
        fillColor,
        textColor,
        textBorderColor,
        opacity,
        borderWidth,
        name,
        pathList,
      } = data ?? this.form;
      let shpName = `shp_${bimGraphId}`;
      //边框颜色
      let bColor = this.hexToRgba(borderColor);
      //区域填充色
      let fColor = this.hexToRgba(fillColor);
      //文字颜色
      let tColor = this.hexToRgba(textColor);
      //文字描边
      let textBColor = this.hexToRgba(textBorderColor);
      //绘制面之前，删除之前绘制的线
      if (type == 1 || type == 2) {
        BlackHole3D.Geometry.delShp(shpName);
      }
      //矢量文字信息
      var shpTextInfo = new BlackHole3D.REShpTextInfo();
      shpTextInfo.text = type == 1 ? name : "";
      shpTextInfo.texBias = [0, 0];
      shpTextInfo.fontName = "RealBIMFont001";
      shpTextInfo.textClr = new BlackHole3D.REColor(
        tColor?.[0] ?? 255,
        tColor?.[1] ?? 255,
        tColor?.[2] ?? 255,
        255
      );
      shpTextInfo.textBorderClr = new BlackHole3D.REColor(
        textBColor?.[0] ?? 255,
        textBColor?.[1] ?? 255,
        textBColor?.[2] ?? 255,
        255
      );
      //矢量线信息
      var lineShpInfo = new BlackHole3D.RELineShpInfo();
      lineShpInfo.shpName = shpName;
      lineShpInfo.potList = pathList;
      lineShpInfo.fillState = type == 1 ? 1 : 0;
      //边框颜色
      lineShpInfo.lineClr = new BlackHole3D.REColor(
        bColor?.[0] ?? 255,
        bColor?.[1] ?? 255,
        bColor?.[2] ?? 255,
        255
      );
      //填充色
      lineShpInfo.fillClr = new BlackHole3D.REColor(
        fColor?.[0] ?? 255,
        fColor?.[1] ?? 255,
        fColor?.[2] ?? 255,
        255 * (Math.abs(opacity) > 1 ? 1 : Math.abs(opacity))
      );
      lineShpInfo.textPos = -3;
      lineShpInfo.scrASDist = -1.0;
      lineShpInfo.scrVisDist = -1;
      lineShpInfo.contactSce = false;
      lineShpInfo.lineWidth = Number(borderWidth) || 2;
      lineShpInfo.textInfo = shpTextInfo;
      let Geometry = BlackHole3D.Geometry.addPolylineShp(lineShpInfo);
      if (!Geometry && type == 1) {
        this.drawerFlag = true;
        this.drawerLine();
        this.$message.error("片区绘制失败，请重新选择点位");
      }
    },

    //删除顶点
    deletePoint(index = 0) {
      this.form.pathList = this.form.pathList.filter((v, i) => i != index);
      this.drawerFlag = true;
      this.drawerLine(2);
    },

    //16进制颜色转rgb颜色
    hexToRgba(hex) {
      if (!hex) hex = "#ffffff";
      let r = parseInt("0x" + hex.slice(1, 3));
      let g = parseInt("0x" + hex.slice(3, 5));
      let b = parseInt("0x" + hex.slice(5, 7));
      return [r, g, b];
    },

    //监听样式切换
    cardStyleChange(val) {
      let {
        borderColor,
        fillColor,
        textColor,
        textBorderColor,
        opacity,
        borderWidth,
      } = val;
      this.form.borderColor = borderColor;
      this.form.fillColor = fillColor;
      this.form.textColor = textColor;
      this.form.textBorderColor = textBorderColor;
      this.form.opacity = opacity;
      this.form.borderWidth = borderWidth;
      let { pathList } = this.form;
      if (!this.drawerFlag && pathList.length > 2) {
        this.drawerLine(1);
      }
    },

    //获取相机视角
    getCamLocate() {
      try {
        this.getCamLocateFlag = true;
        let { camDir, camPos, camRotate } = BlackHole3D.Camera.getCamLocate();
        this.form.angle = {
          camDir,
          camPos,
          camRotate,
        };
        this.$message.success("视角获取成功！");
      } catch (error) {
        this.getCamLocateFlag = false;
        this.form.angle = null;
        this.$message.error("视角获取失败，请稍后重试~");
      }
    },

    //打开卡片样式弹窗
    openCardStyleModal() {
      this.cardStyleModalVisible = true;
    },

    //新增 编辑
    handelOperate(type = 0, item = {}) {
      if (type != 0) {
        this.getAreaList();
        this.getTypeList();
      }
      let {
        uuid,
        //所属模块
        moduleType,
        //所属区域
        region,
        //类型
        areaType,
        //名称
        name,
        //位置
        portCoordinates,
        areaColorFrame,
        areaColorFill,
        areaColorWriting,
        areaColorBorderColor,
        areaColorBackground,
        areaColorBorderWidth,
        //视角
        camDir,
        camPos,
        camRotate,
        viewPortImage,
      } = item;
      switch (type) {
        //新增
        case 1:
          //所属模块
          this.form.module = Number(moduleType) || 0;
          //所属区域
          this.form.superior = region || undefined;
          //类型
          this.form.type = areaType || undefined;
          //名称
          this.form.name = name;
          //位置
          this.form.pathList = [];
          //区域边框颜色
          this.form.borderColor = "#7FEA9B";
          //区域填充颜色
          this.form.fillColor = "#7FEA9B";
          //名称字体颜色
          this.form.textColor = "#50DD7E";
          //名称边框颜色
          this.form.textBorderColor = "#012D0F";
          //背景透明度
          this.form.opacity = 0.5;
          //边框宽度
          this.form.borderWidth = 2;
          //视角
          this.form.angle = null;
          //视角截图
          this.form.viewPortImage = "";
          //拷贝原有数据
          this.formCopy = {};
          break;
        //编辑
        case 2:
          this.bimGraphId = uuid;
          //所属模块
          this.form.module = Number(moduleType) || 0;
          //所属区域
          this.form.superior = region || undefined;
          //类型
          this.form.type = areaType || undefined;
          //名称
          this.form.name = name;
          //位置
          this.form.pathList = JSON.parse(portCoordinates);
          //区域边框颜色
          this.form.borderColor = areaColorFrame;
          //区域填充颜色
          this.form.fillColor = areaColorFill;
          //名称字体颜色
          this.form.textColor = areaColorWriting;
          //名称边框颜色
          this.form.textBorderColor = areaColorBorderColor;
          //背景透明度
          this.form.opacity = Number(areaColorBackground);
          //边框宽度
          this.form.borderWidth = Number(areaColorBorderWidth);
          //视角
          this.form.angle = {
            camDir: JSON.parse(camDir),
            camPos: JSON.parse(camPos),
            camRotate: JSON.parse(camRotate),
          };
          //视角截图
          this.form.viewPortImage = viewPortImage;
          //拷贝原有数据
          this.formCopy = cloneDeep(this.form);
          break;

        default:
          break;
      }
      this.operateType = type;
    },

    //删除属性
    handelDelete(item = {}) {
      let that = this;
      that.$confirm({
        title: "提示",
        content: "确定删除该数据吗？删除之后不可恢复！",
        okText: "确定",
        cancelText: "取消",
        icon: () =>
          that.$createElement("a-icon", {
            props: {
              key: "warning",
              type: "exclamation-circle",
              twoToneColor: "#faad14",
            },
          }),
        onOk() {
          axios
            .post(
              `/probusiness/lygPortAreaRegionMarking/deleteBatch?varchar=${item.uuid}`,
              {},
              {
                headers: {
                  "Content-Type": "application/json",
                },
              }
            )
            .then((res) => {
              if (res.statusCode === 200 || res === 1) {
                that.$message.success("删除成功", 1.5);
                BlackHole3D.Geometry.delShp(`shp_${item.uuid}`);
                that.getListData();
                that.$parent.getBimLayerSource("handleActive");
                EventBus.$emit("districtUpdate", {
                  event: "delete",
                  data: {
                    uuid,
                  },
                });
              } else {
                that.$message.error(res.message);
              }
            })
            .catch((_) => {});
        },
      });
    },

    //保存
    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          let { getCamLocateFlag, operateType } = this;
          let {
            module,
            textColor,
            textBorderColor,
            angle,
            name,
            type,
            fillColor,
            borderColor,
            opacity,
            borderWidth,
            pathList,
            superior,
          } = this.form;
          if (pathList.length < 3 || this.drawerFlag) {
            this.$message.error("请完善区域绘制！");
            return;
          }
          this.submitLoading = true;
          setTimeout(async (_) => {
            //视角位置
            let angleValue = {};
            if (!angle) {
              angleValue = BlackHole3D.Camera.getCamLocate();
            } else {
              angleValue = angle;
            }
            let { camDir, camPos, camRotate } = angleValue;
            //接口参数
            let params = {
              //类型 【1区域 2片区 3标记】
              type: 2,
              //所属模块
              moduleType: module,
              //所属区域
              region: superior || "",
              //片区类型
              areaType: type || "",
              //名称
              name,
              /* 卡片样式 */
              //区域填充色
              areaColorFill: fillColor,
              //区域填充色透明度
              areaColorBackground: opacity,
              //区域边框颜色
              areaColorFrame: borderColor,
              //区域边框宽度
              areaColorBorderWidth: borderWidth,
              //字体颜色
              areaColorWriting: textColor,
              //字体边框颜色
              areaColorBorderColor: textBorderColor,
              //位置
              portCoordinates: JSON.stringify(pathList),
              //视角
              camDir: JSON.stringify(camDir),
              camPos: JSON.stringify(camPos),
              camRotate: JSON.stringify(camRotate),
            };
            //视口缩略图
            if (operateType == 1 || getCamLocateFlag) {
              let { url } = await this.upLoadFile();
              params.viewPortImage = url;
            }
            if (operateType == 1) {
              //新增
              this.saveApi(params);
            } else if (operateType == 2) {
              //编辑
              this.editApi(params);
            }
          }, 500);
        } else {
          return false;
        }
      });
    },

    //上传截图
    upLoadFile() {
      return new Promise((resolve, reject) => {
        const canvas = document.getElementById("blackHoleCanvas");
        canvas.toBlob((blob) => {
          const file = new File([blob], randomUUID() + ".png", {
            type: "image/png",
          });
          let formData = new FormData();
          formData.append("bucket", "datav");
          formData.append("file", file);
          axios
            .post(`/document/minio/uploadfile`, formData, {
              headers: {
                "Content-Type": "multipart/form-data",
              },
            })
            .then((res) => {
              let { statusCode, dfsFileUuid, url } = res;
              if (statusCode == 200) {
                resolve({ dfsFileUuid, url });
              } else {
                this.$message.error("保存失败，请稍后重试！");
                reject();
              }
            })
            .catch((_) => {
              this.$message.error("保存失败，请稍后重试！");
              reject();
            });
        }, "image/png");
      });
    },

    //新增保存
    saveApi(params = {}) {
      axios
        .post(`/probusiness/lygPortAreaRegionMarking/save`, params, {
          headers: {
            "Content-Type": "application/json",
          },
        })
        .then((res) => {
          let { statusCode, data } = res;
          let { uuid } = data;
          if (statusCode == 200) {
            this.submitSuccess = true;
            this.$message.success({
              content: "区域保存成功！",
              key: "loadingKey",
              duration: 2,
            });
            //更新原有区域
            // let shpName = `shp_${this.bimGraphId}`;
            // BlackHole3D.Geometry.delShp(shpName);
            // this.bimGraphId = uuid;
            // this.drawerLine(1);
            this.$parent.getBimLayerSource("handleActive");
            EventBus.$emit("districtUpdate", {
              event: "add",
              data: {
                uuid,
              },
            });
            //查询列表数据
            this.getListData();
            //
            this.onCancel();
          } else {
            this.submitSuccess = false;
            this.$message.error("保存失败，请稍后重试！");
          }
        })
        .catch((_) => {
          this.submitSuccess = false;
          this.$message.error("保存失败，请稍后重试！");
        })
        .finally((_) => {
          this.submitLoading = false;
        });
    },

    //编辑保存
    editApi(params = {}) {
      let { bimGraphId } = this;
      axios
        .post(
          `/probusiness/lygPortAreaRegionMarking/update`,
          { ...params, uuid: bimGraphId },
          {
            headers: {
              "Content-Type": "application/json",
            },
          }
        )
        .then((res) => {
          let { statusCode, data } = res;
          let { uuid } = data;
          if (statusCode == 200) {
            this.submitSuccess = true;
            this.$message.success({
              content: "区域编辑成功！",
              key: "loadingKey",
              duration: 2,
            });
            //更新原有区域
            // let shpName = `shp_${this.bimGraphId}`;
            // BlackHole3D.Geometry.delShp(shpName);
            // this.bimGraphId = uuid;
            // this.drawerLine(1);
            this.$parent.getBimLayerSource("handleActive");
            EventBus.$emit("districtUpdate", {
              event: "edit",
              data: {
                uuid,
              },
            });
            //查询列表数据
            this.getListData();
            //
            this.onCancel();
          } else {
            this.submitSuccess = false;
            this.$message.error("编辑失败，请稍后重试！");
          }
        })
        .catch((_) => {
          this.submitSuccess = false;
          this.$message.error("编辑失败，请稍后重试！");
        })
        .finally((_) => {
          this.submitLoading = false;
        });
    },

    //二维码-单张下载-图片
    async downloadQrCode() {
      return new Promise(async (resolve) => {
        let htmlName = document.getElementById("bim-container");
        let canvas = await html2canvas(htmlName);
        let dataUrl = canvas.toDataURL("image/png");
        resolve(dataUrl);
      });
    },

    //查询区域列表
    getAreaList() {
      return new Promise((resolve, reject) => {
        axios
          .post(
            `/probusiness/lygPortAreaRegionMarking/queryRegionTree`,
            {},
            {
              headers: {
                "Content-Type": "application/json",
              },
            }
          )
          .then((res) => {
            let { statusCode, data } = res;
            if (statusCode == 200) {
              let filterData = addAttributeByKey(
                null,
                "scopedSlots",
                { icon: "custom" },
                data ?? [],
                "childs"
              );
              this.form.superiorData = filterData ?? [];
              resolve();
            } else {
              this.form.superiorData = [];
              reject();
            }
          })
          .catch((_) => {
            this.form.superiorData = [];
            reject();
          });
      });
    },

    //查询类型列表
    getTypeList() {
      this.$post("/system/dicSet/getDicItemByCode", {
        code: "areaType",
      })
        .then((res) => {
          let { data } = res;
          this.form.typeData = data ?? [];
        })
        .catch((_) => {
          this.form.typeData = [];
        });
    },

    //取消
    onCancel() {
      switch (this.operateType) {
        //新增
        case 1:
          //没有保存-直接删除当前片区
          if (!this.submitSuccess) {
            BlackHole3D.Geometry.delShp(`shp_${this.bimGraphId}`);
          }
          break;

        //编辑
        case 2:
          if (!this.submitSuccess) {
            BlackHole3D.Geometry.delShp(`shp_${this.bimGraphId}`);
            this.drawerLine(1, this.formCopy);
          }
          break;

        default:
          break;
      }
      this.resetForm();
    },

    //重置表单
    resetForm() {
      this.bimGraphId = "";
      this.drawerFlag = false;
      //片区样式
      this.form.borderColor = "#7FEA9B";
      this.form.fillColor = "#7FEA9B";
      this.form.textColor = "#50DD7E";
      this.form.textBorderColor = "#012D0F";
      this.form.opacity = 0.5;
      this.form.borderWidth = 2;
      //
      this.form.pathList = [];
      this.operateType = 0;
      this.$refs?.ruleForm?.resetFields();
    },
  },
};
</script>
<style lang="less" scoped>
.districtManage {
  width: 100%;
  height: 100%;
  //列表
  .list-container {
    width: 100%;
    height: 100%;
    display: flex;
    box-sizing: border-box;
    padding: 16px 0 0 0;
    flex-direction: column;
    overflow: hidden;
    .add-button {
      height: 32px;
      border-radius: 4px;
      border: 1px solid #00d5ff;
      display: flex;
      color: #00d5ff;
      font-size: 14px;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      flex-shrink: 0;
      margin: 0 16px 16px 16px;
    }
    .body {
      flex: 1;
      box-sizing: border-box;
      padding: 0 16px 0 16px;
      margin-bottom: 16px;
      overflow: auto;
      position: relative;
      .ant-empty {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        opacity: 0.5;
      }
      .ant-spin {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
      .list-item {
        height: 108px;
        background: rgba(0, 213, 255, 0.2);
        border-radius: 4px;
        border: 1px solid #1f90a6;
        font-size: 14px;
        display: flex;
        flex-direction: column;
        border-radius: 4px;
        overflow: hidden;
        &:not(:last-child) {
          margin-bottom: 10px;
        }
        .header {
          height: 30px;
          display: flex;
          align-items: center;
          box-sizing: border-box;
          padding: 0 10px;
          color: #eef9ff;
          flex-shrink: 0;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          background: rgba(0, 213, 255, 0.4);
        }
        .content {
          flex: 1;
          padding: 10px;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          .viewport {
            width: 96px;
            height: 56px;
            border-radius: 4px;
            background: #0f8fae;
            flex-shrink: 0;
            img {
              width: 100%;
              height: 100%;
              object-fit: contain;
            }
          }
          .operate {
            display: flex;
            flex: 1;
            justify-content: center;
            margin-left: 10px;
            .anticon {
              color: #00d5ff;
              font-size: 18px;
              cursor: pointer;
              &:not(:first-child) {
                margin-left: 20px;
              }
            }
          }
        }
      }
    }
  }
  //新增/编辑
  .operate-container {
    width: 100%;
    height: 100%;
    display: flex;
    box-sizing: border-box;
    padding: 16px 0 0 0;
    flex-direction: column;
    overflow: hidden;
    .header {
      height: 16px;
      font-size: 14px;
      margin: 0 16px 10px 16px;
      display: flex;
      align-items: center;
      color: #00d5ff;
      flex-shrink: 0;
      &:before {
        content: "";
        display: flex;
        height: 100%;
        width: 3px;
        border-radius: 2px;
        background: #00d5ff;
        margin-right: 10px;
      }
    }
    .body {
      flex: 1;
      box-sizing: border-box;
      padding: 0 0 0 16px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      .form-container {
        flex: 1;
        overflow: auto;
        padding-right: 16px;
        /deep/.ant-form {
          .ant-form-item-label {
            line-height: 20px;
            label {
              color: #eef9ff;
            }
          }
          .ant-form-item-control-wrapper {
            //清空按钮
            .anticon-close-circle {
              color: #eef9ff;
            }
            //箭头图标
            .anticon-down {
              color: #eef9ff;
            }
            //选择框
            .ant-select {
              .ant-select-selection {
                background-color: rgba(0, 213, 255, 0.1);
                border-color: #00d5ff;
                color: #eef9ff;
              }
              .ant-select-selection__clear {
                background: none;
              }
            }
            //输入框
            .ant-input {
              background: rgba(0, 213, 255, 0.1);
              border: 1px solid #00d5ff;
              color: #eef9ff;
            }
            //选择图标
            .icon-form-item {
              display: flex;
              padding: 4px 0 4px 0;
              .icon {
                height: 32px;
                width: 32px;
                margin-right: 16px;
                background: rgba(0, 213, 255, 0.1);
                line-height: 32px;
                img {
                  width: 100%;
                  height: 100%;
                  object-fit: contain;
                }
              }
              .button {
                width: 86px;
                height: 32px;
                background: rgba(0, 213, 255, 0.1);
                border-radius: 4px;
                border: 1px solid #00d5ff;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                color: #00d5ff;
                font-size: 14px;
              }
            }
            //选择位置
            .position-form-item {
              display: flex;
              padding: 4px 0 4px 0;
              flex-direction: column;
              .button {
                width: 86px;
                height: 32px;
                background: rgba(0, 213, 255, 0.1);
                border-radius: 4px;
                border: 1px solid #00d5ff;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                color: #00d5ff;
                font-size: 14px;
              }
              .point-list {
                display: flex;
                flex-wrap: wrap;
                padding-top: 12px;
                .point-item {
                  position: relative;
                  width: 68px;
                  height: 32px;
                  background: rgba(0, 213, 255, 0.3);
                  border-radius: 4px;
                  margin-right: 12px;
                  margin-bottom: 10px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  color: #eef9ff;
                  font-size: 14px;
                  .del-btn {
                    position: absolute;
                    width: 16px;
                    height: 16px;
                    background: #d8494e;
                    border-radius: 50%;
                    top: -8px;
                    right: -8px;
                    cursor: pointer;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 20px;
                    overflow: hidden;
                  }
                }
              }
              //   <div class="point-list">
              //       <div
              //         class="point-item"
              //         v-for="(item, index) in 9"
              //         :key="index"
              //       >
              //         {{ index }}
              //         <div class="del-btn"></div>
              //       </div>
              //     </div>
            }
            //选择视角
            .angle-form-item {
              display: flex;
              flex-direction: column;
              padding: 4px 0 4px 0;
              .button {
                width: 86px;
                height: 32px;
                background: rgba(0, 213, 255, 0.1);
                border-radius: 4px;
                border: 1px solid #00d5ff;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                color: #00d5ff;
                font-size: 14px;
              }
              .angle-img {
                width: 86px;
                height: 86px;
                background: rgba(0, 213, 255, 0.1);
                margin-top: 10px;
                img {
                  width: 100%;
                  height: 100%;
                  object-fit: contain;
                }
              }
            }
          }
        }
      }
      .button-container {
        flex-shrink: 0;
        padding: 16px 0 30px 0;
        display: flex;
        justify-content: center;
        button {
          &:not(:first-child) {
            margin-left: 24px;
          }
          &.cancel {
            background: rgba(0, 213, 255, 0.2);
            border: 1px solid rgba(0, 213, 255, 0.2);
            color: #b8f3ff;
          }
          &.ant-btn-primary {
            color: #fff;
            background: #00d5ff !important;
            border: 1px solid #00d5ff;
          }
        }
      }
    }
  }
}
</style>
